<template>
  <view class="record">
    <view class="record-list">
      <view class="item" v-for="item in list" :key="item.id" @click="toDetail(item)">
        <view class="title">
          <view>{{$t('withdrawal.jiaoYiLsH')}}：{{ item.withdrawNumber }}</view>
          <view class="title-status" v-if="item.isCheck === 0">{{$t('withdrawal.shenHeZ')}}</view>
          <view class="title-status" v-if="item.isCheck === 1">{{$t('withdrawal.tongGuo')}}</view>
          <view class="title-status" v-if="item.isCheck === 2">{{$t('withdrawal.buTongG')}}</view>
        </view>
        <view class="content">
          <view class="content-left">{{$t('withdrawal.tiXianJe')}}：</view>
          <view class="content-right price">¥{{ item.withdrawAmountStr }}</view>
        </view>
        <view class="content">
          <view class="content-left">{{$t('withdrawal.tiXianLx')}}：</view>
          <view class="content-right">{{$t('withdrawal.yinHangK')}}</view>
        </view>
        <view class="content">
          <view class="content-left">{{$t('withdrawal.tiXianZh')}}：</view>
          <view class="content-right">{{ item.bankNumber }}</view>
        </view>
        <view class="content">
          <view class="content-left">{{$t('withdrawal.shenQingTxSj')}}：</view>
          <view class="content-right">{{ item.createTime }}</view>
        </view>
        <view class="content">
          <view class="content-left">{{$t('withdrawal.daoZhangSj')}}：</view>
          <view class="content-right">{{ item.updateTime }}</view>
        </view>
      </view>
      <view class="no-data" v-if="!list.length">
        <u-empty mode="data" :icon="`${imgPath}/images/index/no_order.png`" width="100px" height="100px" :text="$t('index.zanWuSj')" textColo="#75CECC" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  computed: {
    imgPath() {
      return this.$config.baseURL + "/static/front";
    },
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      list: [],
      totalCount: 0,
    };
  },
  onLoad() {
    this.getUserWithdrawList();
  },
  onShow() {
    uni.setNavigationBarTitle({
      title: this.$t("mine.tiXianJl"),
    });
  },
  onReachBottom() {
    //上拉到底时触发，onReachBottom函数跟生命周期同级
    if (this.orderList.length < this.totalCount) {
      this.pageNum++; //当前条数小于总条数 则增加请求页数
      this.getUserWithdrawList(); //调用加载数据方法
    } else {
      uni.$u.toast(this.$t("index.yiJiaZaiQb"));
    }
  },
  methods: {
    /**
     * 用户订单
     */
    async getUserWithdrawList() {
      const res = await this.$api.userWithdrawList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });
      if (res.code === 0 && res.data) {
        this.list = [...this.list, ...res.data.list];
        this.totalCount = res.data.totalCount;
      } else {
        this.list = [];
      }
    },
    toDetail(item) {
      uni.navigateTo({
        url:
          "/pages/withdrawal_detail/withdrawal_detail?orderNumber=" +
          item.withdrawNumber,
      });
    },
  },
};
</script>
<style>
page {
  background-color: #f6f6f6;
}
</style>

<style lang="scss" scoped>
.record {
  width: 100%;
  overflow: hidden;
  .record-list {
    width: calc(100% - 30px);
    overflow: hidden;
    margin: 0 auto;
    .item {
      background-color: #fff;
      border-radius: 8px;
      padding: 10px 15px 20px;
      margin-top: 20px;
      .title {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #ddd;
        font-size: 14px;
        margin-bottom: 15px;
        .title-status {
          color: #75cecc;
        }
      }
      .content {
        height: 30px;
        align-items: center;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        color: #333;
        .content-left {
          color: #999;
        }
        .price {
          color: #ff6153;
        }
      }
    }
  }
}
</style>
